import {IconImg} from "@/components/images"
import {CItem} from "@/components/item"
import CModal from "@/components/modal"
import MyNav from "@/components/nav"
import appStore from "@/store/app"
import {imagesUrl} from "@/utils/baseUrl"
import {getStorage, setStorage} from "@/utils/localstoreage"
import {
	toAboutUs,
	toContactUs,
	toEditCompanyName,
	toEditUserPhone,
	toLogin,
	toSystemNotification,
	toUserInfo,
	toVideoSurveillance
} from "@/utils/pageRedirect"
import {Button, View} from "@tarojs/components"
import Taro from "@tarojs/taro"
import {useDidShow} from "@tarojs/taro"
import {observer} from "mobx-react"
import {useContext} from "react"
import {UserItem} from "./components"
import {userStore} from "./model"

/**分割线 */
const SplitLine = () => (
	<View className="h-1 px-24">
		<View className="h-full bg-border"></View>
	</View>
)

function User() {
	const {visible, changeVisible, pageData, updatePageDataSource} = useContext(userStore)
	const {login, userInfo, isLogin} = useContext(appStore)

	const showEditCompanyNameModal = getStorage("showEditCompanyNameModal")

	useDidShow(() => {
		console.log("user useDidShow")
		login({
			cb() {
				updatePageDataSource()
			}
		})

		if (!userInfo.userCompany && isLogin) {
			showEditCompanyNameModal !== "false" && changeVisible(true)
		}
	})

	return (
		<View
			className="container flex flex-col"
			style={{
				backgroundImage: `url(${imagesUrl + "user-bg.png"})`,
				backgroundSize: "100% 100%",
				backgroundRepeat: "no-repeat"
			}}
		>
			<MyNav showBack={false}>云水镜</MyNav>

			<View className="flex-1 overflow-y-auto pb-16">
				<CItem
					posIconStyle={{
						width: "48rpx",
						height: "48rpx"
					}}
					style={{
						height: "180rpx",
						marginBottom: "70rpx",
						padding: "22rpx 48rpx !important",
						justifyContent: "space-between"
					}}
					onClick={() => toUserInfo()}
				>
					<View className="flex-1 h-full flex items-center">
						<IconImg
							imgName="user-header"
							style={{
								width: "136rpx",
								height: "136rpx"
							}}
						></IconImg>
						{isLogin ? (
							<View className="ml-14 flex-1 h-full flex flex-col items-center">
								<View className="w-full hanzi mt-8 mb-6 text-20 font-bold truncate">
									{pageData.user?.userNearName || ""}
								</View>

								<View className="w-full hanzi text-13 truncate">
									{`当前设备 ${pageData.devCount} 台`}
								</View>
							</View>
						) : (
							<View
								className="ml-14 flex-1 h-full flex items-center"
								onClick={() => toLogin()}
							>
								<View className="hanzi text-14 truncate">
									未登录，点击此前往登录
								</View>
							</View>
						)}
					</View>
				</CItem>

				{isLogin ? (
					<>
						<View className="px-16">
							<View className="bg-white rounded-12 overflow-hidden">
								<UserItem
									icon="user-message"
									title="系统通知"
									desc=""
									onClick={() => {
										toSystemNotification()
									}}
								></UserItem>
								<SplitLine></SplitLine>
								<UserItem
									icon="user-camera"
									title="监控摄像"
									desc=""
									onClick={() => {
										toVideoSurveillance()
									}}
								></UserItem>
							</View>

							<View className="mt-16 bg-white rounded-12 overflow-hidden">
								<UserItem
									icon="user-companyName"
									title="公司名称"
									desc={pageData.user?.userCompany || "未填写公司名称"}
									onClick={() => toEditCompanyName()}
								></UserItem>

								<SplitLine></SplitLine>

								<UserItem
									icon="user-phone"
									title="手机号"
									desc={pageData.user?.userPhone || ""}
									onClick={() => toEditUserPhone()}
								></UserItem>
							</View>

							<View className="mt-16 bg-white rounded-12 overflow-hidden shadow-sm">
								{/* <UserItem
                  icon="user-aboutUs"
                  title="关于我们"
                  desc=""
                  onClick={() => toAboutUs()}
                ></UserItem>
                <SplitLine></SplitLine> */}
								{/* <UserItem
									icon="user-service"
									title="联系客服"
									desc=""
									onClick={() => toContactUs()}
								></UserItem> */}
							</View>
						</View>
						<CModal
							show={visible}
							icon="error"
							changeShow={changeVisible}
							title="为正确使用您的设备"
							content="请输入您的公司名称、以免发生数据记录异常~"
							confirmText="前往设置"
							cancelText="不再提示"
							cancel={() => {
								setStorage("showEditCompanyNameModal", false)
							}}
							confirm={() => {
								toEditCompanyName()
							}}
						></CModal>
					</>
				) : null}
			</View>
		</View>
	)
}
export default observer(User)
